<template>
  <div>
    <el-dialog custom-class="dialog"
      :visible.sync="appsDialogVisible"
      :show-close="false"
      width="920px"
      append-to-body
      :before-close="resetDialog">
      <div style="display:flex" v-loading="loading">
        <div style="width:168px;">
          <div style="wdith:168px;height:168px;padding:13px;border: 1px solid #F0F0F0;">
            <img v-if="appInfo.picture" style="width:140px;height:140px;border-radius: 4px;" :src="appInfo.picture" alt="">
          </div>
          <el-button v-if="appInfo.installed||$store.state.user.tenantCode===appInfo.fromTenant" @click="gotoMyApp()" type="warning" style="width:100%;margin:14px 0" size="medium">{{$t('custom.component.cardApp.goApplication')}}</el-button>
          <el-button v-else @click="addToMyApp(appInfo)" type="primary" style="width:100%;margin:14px 0" size="medium">{{$t('custom.component.cardApp.addApp')}}</el-button>
          <div style="font-size: 12px;font-weight: 600;color: #808080;">{{$t('custom.component.cardApp.publisher')}}</div>
          <div style="height:20px;line-height:20px;font-size: 14px;color: #404040;">{{appInfo.tenantName}}</div>
          <div style="margin-top:16px;font-size: 12px;font-weight: 600;color: #808080;">{{$t('custom.component.cardApp.lastUpdated')}}</div>
          <div style="height:20px;line-height:20px;font-size: 14px;color: #404040;">{{formatDate( appInfo.updateTime,'MM/DD/YYYY HH:mm')}}</div>
          <div style="margin:16px 0 5px;font-size: 12px;font-weight: 600;color: #808080;">{{$t('custom.component.cardApp.integration')}}</div>
          <div style="max-height:150px;overflow:auto">
            <img v-show="item.icon" v-for="item in appInfo.integrationList" :key="item.appId" :src="item.icon" style="width:20px;height:20px;margin-right:10px;margin-bottom:10px;border-radius: 4px;" alt="">
          </div>
        </div>
        <div style="width:672px;margin-left:40px">
          <div style="font-size: 24px;line-height:28px;font-weight: 600;color: #404040;display:flex;justify-content:space-between;">
            <div style="display:flex;justify-content:space-between;">
              <div style="width:535px">{{appInfo.name}}</div>
              <i style="color:#17B3A3;font-size:14px;margin-left:20px;font-weight:400" class="cuifont icon_help_circle"></i>
              <a class="cursor_pointer" style="color:#17B3A3;font-size:14px;margin-left:8px;font-weight:400" target="_blank" :href="appInfo.instructions" type="primary">{{$t('custom.component.cardApp.help')}}</a>
            </div>
            <div @click="resetDialog" class="cursor_pointer bgc_hover" style="width:28px;height:28px;margin-left:10px;text-align:center;line-height:28px;border-radius:2px"><span style="font-size:18px" class="el-icon-close"></span></div>
          </div>
          <div v-if="appInfo.description&&appInfo.description.trim().length>0">
            <el-tooltip :open-delay="1000" class="item" effect="dark" :disabled="appInfo.description.length<=118" :content="appInfo.description" placement="top">
              <div class="text_more"  style="height:57px;font-size: 14px;color: #808080;line-height: 19px;">{{appInfo.description}}</div>
            </el-tooltip>
          </div>
          <div style="height:19px;font-size: 14px;color: #404040;margin-top:25px">
            <span>{{$t('custom.component.cardApp.version')}}</span>
            <span style="margin-left:12px">{{appInfo.appVersion}}</span>
          </div>
          <div v-if="appInfo.upgradeDesc&&appInfo.upgradeDesc.trim().length>0">
            <el-tooltip :open-delay="1000" class="item"  effect="dark" :disabled="appInfo.upgradeDesc.length<=118" :content="appInfo.upgradeDesc" placement="top">
              <div class="text_more" style="height:57px;font-size: 14px;color: #808080;line-height: 19px;margin-top:8px">{{appInfo.upgradeDesc}}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GlobalTimeformat } from '@/utils/common'
export default {
  data () {
    return {
      appsDialogVisible: false,
      appInfo: {},
      loading: false
    }
  },
  methods: {
    gotoMyApp () {
      this.resetDialog()
      this.$router.push({ name: 'mspbots-card-apps-index' })
    },
    handlergo (item) {
      this.resetDialog()
      if (item.appResourceList[0].resourceType === 1) {
        this.$router.push(`dashboard-${item.appResourceList[0].resourceId}?pageid=${item.appResourceList[0].resourceId}`)
      } else if (item.appResourceList[0].resourceType === 2) {
        this.$router.push(`BotDetail?pageid=botdetail&botId=${item.appResourceList[0].resourceId}`)
      }
    },
    addToMyApp (item) {
      this.$emit('addToMyApp', item)
    },
    formatDate (time, str) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    init (id) {
      this.getAppInfoStore(id)
      this.appsDialogVisible = true
    },
    getAppInfoStore (id) {
      var params = {
        id: id
      }
      this.loading = true
      this.$interface.reports.getAppInfoApi(params)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.appInfo = res.data
        }).catch(() => { })
    },
    resetDialog () {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>
<style lang="scss" scoped>
.cursor_pointer {
  cursor: pointer;
}
.bgc_hover:hover {
  background-color: $--theme-color-background;
  color: $--theme-color;
}
.color_hover:hover {
  color: #17B3A3!important;
}
::v-deep .el-dialog__header {
    // background-color: #003A8C;
    display: none;
}
::v-deep .el-dialog {
  height: 547px;
}
.text_more {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
